<template>
  <div class="case-detail">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-6 py-4">
        <div class="flex justify-between items-center">
          <div class="flex items-center space-x-4">
            <el-button @click="goBack" circle>
              <i class="fas fa-arrow-left"></i>
            </el-button>
            <div>
              <h1 class="text-2xl font-bold text-gray-800">{{ caseInfo.caseNumber }}</h1>
              <p class="text-sm text-gray-600">{{ caseInfo.caseType }}</p>
      </div>
    </div>
          <div class="flex items-center space-x-3">
            <el-tag :type="getStatusType(caseInfo.status)">{{ getStatusText(caseInfo.status) }}</el-tag>
            <el-button @click="editCase">
              <i class="fas fa-edit mr-2"></i>编辑
            </el-button>
            <el-dropdown>
              <el-button type="primary">
                更多操作<i class="fas fa-chevron-down ml-2"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="submitFiling">
                    <i class="fas fa-gavel mr-2"></i>提交立案
                  </el-dropdown-item>
                  <el-dropdown-item @click="shareCase">
                    <i class="fas fa-share mr-2"></i>共享案件
                  </el-dropdown-item>
                  <el-dropdown-item @click="archiveCase" divided>
                    <i class="fas fa-archive mr-2"></i>归档案件
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
  </div>
        </div>
      </div>
    </header>

    <div class="container mx-auto px-6 py-6">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧主要内容 -->
        <div class="lg:col-span-2 space-y-6">
          <!-- 目标流程 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-route text-blue-600 mr-2"></i>
                目标流程
              </h2>
            </div>
            <div class="p-6">
              <div class="process-timeline">
                <div v-for="(stage, index) in processStages" :key="stage.id" 
                     class="timeline-item">
                  <div class="timeline-node">
                    <div :class="['node-circle', getStageClass(stage.status)]">
                      <i :class="getStageIcon(stage.type)" class="text-white"></i>
                    </div>
                    <div v-if="index < processStages.length - 1" class="connecting-line"></div>
                  </div>
                  <div class="timeline-content">
                    <div class="flex items-center justify-between mb-2">
                      <h3 class="font-medium text-gray-800">{{ stage.title }}</h3>
                      <div class="flex items-center space-x-2">
                        <span :class="getStageTagClass(stage.status)" class="text-xs px-2 py-1 rounded-full">
                          {{ getStageStatusText(stage.status) }}
                        </span>
                        <span class="text-xs text-gray-500">{{ formatDate(stage.targetDate) }}</span>
                      </div>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">{{ stage.description }}</p>
                    <div class="progress-info">
                      <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                        <span>完成度</span>
                        <span>{{ stage.progress }}%</span>
                      </div>
                      <el-progress 
                        :percentage="stage.progress" 
                        :color="getProgressColor(stage.progress)"
                        :stroke-width="6"
                      ></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 待办事项 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                  <i class="fas fa-tasks text-orange-600 mr-2"></i>
                  待办事项
                  <span class="ml-2 text-sm text-orange-600 bg-orange-100 px-2 py-1 rounded-full">
                    {{ pendingTodos.length }}
                  </span>
                </h2>
                <el-button @click="addTodo" size="small">
                  <i class="fas fa-plus mr-1"></i>添加
                </el-button>
              </div>
            </div>
            <div class="p-6">
              <div class="space-y-4">
                <div v-for="todo in todos" :key="todo.id" 
                     :class="['todo-item p-4 border rounded-lg transition-all',
                             todo.completed ? 'bg-gray-50 border-gray-200' : 'bg-white border-gray-300 hover:border-blue-300']">
                  <div class="flex items-start space-x-3">
                    <el-checkbox 
                      v-model="todo.completed" 
                      @change="toggleTodo(todo)"
                      :disabled="todo.completed"
                    ></el-checkbox>
                    <div class="flex-1">
                      <div class="flex items-center justify-between mb-2">
                        <h4 :class="['font-medium', todo.completed ? 'text-gray-500 line-through' : 'text-gray-800']">
                          {{ todo.title }}
                        </h4>
                        <div class="flex items-center space-x-2">
                          <span :class="getPriorityClass(todo.priority)" class="text-xs px-2 py-1 rounded">
                            {{ getPriorityText(todo.priority) }}
                          </span>
                          <el-dropdown>
                            <i class="fas fa-ellipsis-v text-gray-400 cursor-pointer hover:text-gray-600"></i>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item @click="editTodo(todo)">编辑</el-dropdown-item>
                                <el-dropdown-item @click="deleteTodo(todo)" divided>删除</el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </div>
                      </div>
                      <p :class="['text-sm', todo.completed ? 'text-gray-400' : 'text-gray-600']">
                        {{ todo.description }}
                      </p>
                      <div class="flex items-center justify-between mt-2">
                        <span class="text-xs text-gray-500">
                          负责人：{{ todo.assignee }}
                        </span>
                        <span :class="['text-xs', isOverdue(todo.dueDate) ? 'text-red-500' : 'text-gray-500']">
                          截止：{{ formatDate(todo.dueDate) }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div v-if="todos.length === 0" class="text-center py-8 text-gray-500">
                  <i class="fas fa-clipboard-list text-3xl mb-2"></i>
                  <p>暂无待办事项</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 赔偿清单自动录入 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                  <i class="fas fa-calculator text-blue-600 mr-2"></i>
                  赔偿清单自动录入
                </h2>
                <div class="flex space-x-2">
                  <el-button @click="autoCalculateCompensation" size="small">
                    <i class="fas fa-magic mr-1"></i>自动计算
                  </el-button>
                  <el-button @click="exportCompensationList" type="primary" size="small">
                    <i class="fas fa-download mr-1"></i>导出清单
                  </el-button>
                </div>
              </div>
            </div>
            <div class="p-6">
              <!-- 基础信息表单 -->
              <el-form :model="compensationForm" label-width="120px" class="compensation-form">
                <div class="section-title">
                  <h3 class="text-md font-semibold text-gray-700 mb-4">
                    <i class="fas fa-user-injured text-orange-500 mr-2"></i>
                    伤者基础信息
                  </h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                  <el-form-item label="年龄">
                    <el-input-number v-model="compensationForm.age" :min="0" :max="150" placeholder="请输入年龄"></el-input-number>
                  </el-form-item>
                  
                  <el-form-item label="月收入">
                    <el-input v-model="compensationForm.monthlyIncome" placeholder="请输入月收入">
                      <template #suffix>元</template>
                    </el-input>
                  </el-form-item>
                  
                  <el-form-item label="伤残等级">
                    <el-select v-model="compensationForm.disabilityLevel" placeholder="选择伤残等级">
                      <el-option label="一级伤残" value="1"></el-option>
                      <el-option label="二级伤残" value="2"></el-option>
                      <el-option label="三级伤残" value="3"></el-option>
                      <el-option label="四级伤残" value="4"></el-option>
                      <el-option label="五级伤残" value="5"></el-option>
                      <el-option label="六级伤残" value="6"></el-option>
                      <el-option label="七级伤残" value="7"></el-option>
                      <el-option label="八级伤残" value="8"></el-option>
                      <el-option label="九级伤残" value="9"></el-option>
                      <el-option label="十级伤残" value="10"></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="住院天数">
                    <el-input-number v-model="compensationForm.hospitalizationDays" :min="0" placeholder="住院天数"></el-input-number>
                  </el-form-item>
                  
                  <el-form-item label="误工天数">
                    <el-input-number v-model="compensationForm.workLossDays" :min="0" placeholder="误工天数"></el-input-number>
                  </el-form-item>
                  
                  <el-form-item label="护理天数">
                    <el-input-number v-model="compensationForm.nursingDays" :min="0" placeholder="护理天数"></el-input-number>
                  </el-form-item>
                </div>
                
                <!-- 赔偿清单 -->
                <div class="section-title">
                  <h3 class="text-md font-semibold text-gray-700 mb-4">
                    <i class="fas fa-list-ul text-green-500 mr-2"></i>
                    赔偿清单详情
                  </h3>
                </div>
                
                <div class="compensation-table">
                  <el-table :data="compensationItems" border style="width: 100%" class="compensation-list-table">
                    <el-table-column prop="category" label="赔偿项目" width="200">
                      <template #default="scope">
                        <div class="compensation-category">
                          <i :class="getCategoryIcon(scope.row.category)" class="mr-2"></i>
                          {{ scope.row.category }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" label="说明" min-width="250"></el-table-column>
                    <el-table-column prop="standard" label="标准" width="150">
                      <template #default="scope">
                        <el-tag size="small" :type="scope.row.isAutoCalculated ? 'success' : 'info'">
                          {{ scope.row.isAutoCalculated ? '自动计算' : '手动输入' }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="金额（元）" width="150">
                      <template #default="scope">
                        <el-input 
                          v-if="!scope.row.isAutoCalculated"
                          v-model="scope.row.amount" 
                          size="small"
                          @input="updateTotalAmount"
                        ></el-input>
                        <span v-else class="text-blue-600 font-medium">
                          {{ formatCurrency(scope.row.amount) }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                      <template #default="scope">
                        <el-button 
                          v-if="scope.row.isAutoCalculated"
                          @click="toggleCalculationMode(scope.row)" 
                          size="mini" 
                          type="text"
                        >
                          手动输入
                        </el-button>
                        <el-button 
                          v-else
                          @click="toggleCalculationMode(scope.row)" 
                          size="mini" 
                          type="text"
                        >
                          自动计算
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  
                  <!-- 合计信息 -->
                  <div class="compensation-summary mt-4 p-4 bg-blue-50 rounded-lg">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                      <div class="summary-item">
                        <span class="label">医疗费合计：</span>
                        <span class="value">{{ formatCurrency(getTotalByType('medical')) }}</span>
                      </div>
                      <div class="summary-item">
                        <span class="label">误工费合计：</span>
                        <span class="value">{{ formatCurrency(getTotalByType('loss')) }}</span>
                      </div>
                      <div class="summary-item">
                        <span class="label">精神损害：</span>
                        <span class="value">{{ formatCurrency(getTotalByType('mental')) }}</span>
                      </div>
                      <div class="summary-item total">
                        <span class="label">总计：</span>
                        <span class="value">{{ formatCurrency(compensationTotal) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form>
            </div>
          </div>

          <!-- 鉴定安排（诉前） -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                  <i class="fas fa-stethoscope text-green-600 mr-2"></i>
                  鉴定安排（诉前）
                </h2>
                <el-button @click="submitToFiling" type="primary" size="small">
                  <i class="fas fa-gavel mr-1"></i>提交立案
                </el-button>
              </div>
            </div>
            <div class="p-6">
              <el-form :model="appraisalForm" label-width="100px" class="appraisal-form">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <el-form-item label="鉴定机构">
                    <el-select v-model="appraisalForm.institution" placeholder="选择鉴定机构">
                      <el-option 
                        v-for="institution in appraisalInstitutions" 
                        :key="institution.id"
                        :label="institution.name" 
                        :value="institution.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="鉴定类型">
                    <el-select v-model="appraisalForm.type" placeholder="选择鉴定类型">
                      <el-option label="伤残鉴定" value="disability"></el-option>
                      <el-option label="医疗损害鉴定" value="medical"></el-option>
                      <el-option label="财产损失鉴定" value="property"></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="预约日期">
                    <el-date-picker 
                      v-model="appraisalForm.appointmentDate" 
                      type="date" 
                      placeholder="选择预约日期">
                    </el-date-picker>
                  </el-form-item>
                  
                  <el-form-item label="预估费用">
                    <el-input v-model="appraisalForm.estimatedCost" placeholder="请输入预估费用">
                      <template #suffix>元</template>
                    </el-input>
                  </el-form-item>
                </div>
                
                <el-form-item label="材料清单">
                  <div class="material-checklist">
                    <div v-for="material in requiredMaterials" :key="material.id" 
                         class="material-item flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-2">
                      <div class="flex items-center">
                        <el-checkbox v-model="material.completed"></el-checkbox>
                        <span class="ml-2 text-sm">{{ material.name }}</span>
                      </div>
                      <span :class="['text-xs px-2 py-1 rounded', material.completed ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700']">
                        {{ material.completed ? '已准备' : '待准备' }}
                      </span>
                    </div>
                  </div>
                </el-form-item>
                
                <el-form-item label="鉴定设备上传">
                  <div class="equipment-upload-section">
                    <div class="upload-header mb-4">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center">
                          <i class="fas fa-upload text-blue-600 mr-2"></i>
                          <span class="text-sm font-medium text-gray-700">上传鉴定设备资料</span>
                        </div>
                        <el-tag size="small" type="info">支持 PDF、图片、压缩包</el-tag>
                      </div>
                      <p class="text-xs text-gray-500 mt-1">
                        请上传车辆行车记录仪、监控录像、现场照片等鉴定相关设备资料
                      </p>
                    </div>
                    
                    <el-upload
                      v-model:file-list="equipmentFiles"
                      :action="uploadAction"
                      :before-upload="beforeEquipmentUpload"
                      :on-success="handleEquipmentUploadSuccess"
                      :on-error="handleEquipmentUploadError"
                      :on-remove="handleEquipmentRemove"
                      multiple
                      drag
                      accept=".pdf,.jpg,.jpeg,.png,.mp4,.avi,.zip,.rar"
                      class="equipment-uploader"
                    >
                      <div class="upload-content">
                        <i class="fas fa-cloud-upload-alt upload-icon"></i>
                        <div class="upload-text">
                          <p>将设备文件拖到此处，或<em>点击上传</em></p>
                          <p class="upload-hint">支持 PDF、图片、视频、压缩包格式</p>
                        </div>
                      </div>
                    </el-upload>
                    
                    <!-- 已上传文件列表 -->
                    <div v-if="equipmentFiles.length > 0" class="uploaded-files mt-4">
                      <h4 class="text-sm font-medium text-gray-700 mb-3">
                        <i class="fas fa-folder-open mr-2"></i>
                        已上传文件 ({{ equipmentFiles.length }})
                      </h4>
                      <div class="files-grid">
                        <div 
                          v-for="(file, index) in equipmentFiles" 
                          :key="index"
                          class="file-item"
                        >
                          <div class="file-info">
                            <div class="file-icon">
                              <i :class="getEquipmentFileIcon(file.name)"></i>
                            </div>
                            <div class="file-details">
                              <div class="file-name" :title="file.name">{{ file.name }}</div>
                              <div class="file-meta">
                                <span class="file-size">{{ formatFileSize(file.size) }}</span>
                                <span class="file-category">{{ getFileCategory(file.name) }}</span>
                              </div>
                            </div>
                          </div>
                          <div class="file-actions">
                            <el-button 
                              size="mini" 
                              type="text" 
                              @click="previewEquipmentFile(file)"
                              v-if="canPreview(file.name)"
                            >
                              <i class="fas fa-eye"></i>
                            </el-button>
                            <el-button 
                              size="mini" 
                              type="text" 
                              @click="downloadEquipmentFile(file)"
                            >
                              <i class="fas fa-download"></i>
                            </el-button>
                            <el-button 
                              size="mini" 
                              type="text" 
                              @click="removeEquipmentFile(index)"
                              class="text-red-500"
                            >
                              <i class="fas fa-trash"></i>
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 设备类别标记 -->
                    <div v-if="equipmentFiles.length > 0" class="equipment-categories mt-4">
                      <h4 class="text-sm font-medium text-gray-700 mb-3">
                        <i class="fas fa-tags mr-2"></i>
                        设备类别标记
                      </h4>
                      <div class="categories-list">
                        <div 
                          v-for="(file, index) in equipmentFiles" 
                          :key="'category-' + index"
                          class="category-item"
                        >
                          <div class="file-label">
                            <i :class="getEquipmentFileIcon(file.name)" class="text-gray-400 mr-2"></i>
                            <span class="text-sm">{{ file.name }}</span>
                          </div>
                          <el-select 
                            v-model="file.equipmentCategory" 
                            placeholder="选择设备类别"
                            size="small"
                            class="category-select"
                          >
                            <el-option label="行车记录仪" value="dashcam" />
                            <el-option label="监控录像" value="surveillance" />
                            <el-option label="现场照片" value="scene_photos" />
                            <el-option label="车辆照片" value="vehicle_photos" />
                            <el-option label="设备检测报告" value="equipment_report" />
                            <el-option label="其他设备" value="other_equipment" />
                          </el-select>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                
                <el-form-item label="备注">
                  <el-input 
                    v-model="appraisalForm.notes" 
                    type="textarea" 
                    :rows="3"
                    placeholder="请输入鉴定相关备注">
                  </el-input>
                </el-form-item>
                
                <el-form-item>
                  <el-button @click="saveAppraisalPlan">保存方案</el-button>
                  <el-button type="primary" @click="submitAppraisal">提交鉴定申请</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

        <!-- 右侧信息面板 -->
        <div class="space-y-6">
          <!-- 案件基本信息 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <h3 class="text-lg font-semibold text-gray-800">基本信息</h3>
            </div>
            <div class="p-6 space-y-4">
              <div class="info-item">
                <span class="label">当事人：</span>
                <span class="value">{{ caseInfo.clientName }}</span>
              </div>
              <div class="info-item">
                <span class="label">联系电话：</span>
                <span class="value">{{ caseInfo.clientPhone }}</span>
              </div>
              <div class="info-item">
                <span class="label">承办律师：</span>
                <span class="value">{{ caseInfo.lawyer }}</span>
              </div>
              <div class="info-item">
                <span class="label">创建时间：</span>
                <span class="value">{{ formatDate(caseInfo.createdAt) }}</span>
              </div>
              <div class="info-item">
                <span class="label">预计结案：</span>
                <span class="value">{{ formatDate(caseInfo.expectedEndDate) }}</span>
              </div>
            </div>
          </div>

          <!-- 整体进度 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <h3 class="text-lg font-semibold text-gray-800">整体进度</h3>
            </div>
            <div class="p-6">
              <div class="text-center mb-4">
                <div class="text-3xl font-bold text-blue-600 mb-2">{{ caseInfo.overallProgress }}%</div>
                <el-progress 
                  :percentage="caseInfo.overallProgress" 
                  :stroke-width="8"
                  :color="getProgressColor(caseInfo.overallProgress)"
                ></el-progress>
              </div>
              <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                  <span class="text-gray-600">已完成阶段：</span>
                  <span class="font-medium">{{ completedStages }}/{{ processStages.length }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-600">待办事项：</span>
                  <span class="font-medium text-orange-600">{{ pendingTodos.length }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-600">预计完成：</span>
                  <span class="font-medium">{{ estimatedDays }}天</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 赔偿清单概览 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-calculator text-blue-600 mr-2"></i>
                赔偿清单概览
              </h3>
            </div>
            <div class="p-6">
              <div class="space-y-4">
                <div class="compensation-overview-item">
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">预估总额</span>
                    <span class="text-lg font-bold text-blue-600">{{ formatCurrency(compensationTotal) }}</span>
                  </div>
                </div>
                
                <div class="compensation-breakdown space-y-2">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">医疗费用</span>
                    <span class="font-medium">{{ formatCurrency(getTotalByType('medical')) }}</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">误工护理</span>
                    <span class="font-medium">{{ formatCurrency(getTotalByType('loss')) }}</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">伤残赔偿</span>
                    <span class="font-medium">{{ formatCurrency(getTotalByType('disability')) }}</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">精神损害</span>
                    <span class="font-medium">{{ formatCurrency(getTotalByType('mental')) }}</span>
                  </div>
                </div>
                
                <div class="compensation-status pt-3 border-t border-gray-200">
                  <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">完成状态</span>
                    <span class="text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded">待完善</span>
                  </div>
                  <div class="progress-bar bg-gray-200 rounded-full h-2">
                    <div class="progress-fill bg-blue-500 h-2 rounded-full" :style="{width: getCompensationProgress() + '%'}"></div>
                  </div>
                  <div class="text-xs text-gray-500 mt-1">
                    已填写 {{ getFilledItemsCount() }}/{{ compensationItems.length }} 项
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 快速操作 -->
          <div class="bg-white rounded-lg shadow-sm">
            <div class="p-6 border-b border-gray-200">
              <h3 class="text-lg font-semibold text-gray-800">快速操作</h3>
            </div>
            <div class="p-6 space-y-3">
              <el-button class="w-full" @click="addDocument">
                <i class="fas fa-file-plus mr-2"></i>添加文档
              </el-button>
              <el-button class="w-full" @click="scheduleAppointment">
                <i class="fas fa-calendar-plus mr-2"></i>安排预约
              </el-button>
              <el-button class="w-full" @click="contactClient">
                <i class="fas fa-phone mr-2"></i>联系当事人
              </el-button>
              <el-button class="w-full" @click="updateStatus">
                <i class="fas fa-sync-alt mr-2"></i>更新状态
              </el-button>
              <el-button class="w-full" @click="exportCompensationList" type="primary">
                <i class="fas fa-download mr-2"></i>提交归档
              </el-button>
            </div>
          </div>
      </div>
    </div>
    </div>

    <!-- 添加待办事项对话框 -->
    <el-dialog v-model="todoDialogVisible" title="添加待办事项" width="500px">
      <el-form :model="newTodo" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="newTodo.title" placeholder="请输入待办事项标题"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="newTodo.description" type="textarea" rows="3" placeholder="请输入详细描述"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="newTodo.priority" placeholder="选择优先级">
            <el-option label="高" value="high"></el-option>
            <el-option label="中" value="medium"></el-option>
            <el-option label="低" value="low"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="newTodo.assignee" placeholder="请输入负责人"></el-input>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker v-model="newTodo.dueDate" type="date" placeholder="选择截止日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="todoDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveTodo">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'CaseDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const todoDialogVisible = ref(false)
    
    // 案件基本信息
    const caseInfo = ref({
      id: route.params.id,
      caseNumber: 'TA2024001789',
      caseType: '交通事故人身损害赔偿纠纷',
      status: 'in-progress',
      clientName: '张某某',
      clientPhone: '138-0013-2468',
      lawyer: '李卫民律师',
      createdAt: '2024-01-15',
      expectedEndDate: '2024-04-15',
      overallProgress: 65
    })
    
    // 目标流程阶段
    const processStages = ref([
      {
        id: 1,
        title: '案件受理',
        type: 'reception',
        status: 'completed',
        progress: 100,
        targetDate: '2024-01-15',
        description: '完成案件受理、资料收集、合同签署等初步工作'
      },
      {
        id: 2,
        title: '证据收集',
        type: 'evidence',
        status: 'completed',
        progress: 100,
        targetDate: '2024-01-25',
        description: '收集事故认定书、医疗材料、现场照片等关键证据'
      },
      {
        id: 3,
        title: '伤残鉴定',
        type: 'appraisal',
        status: 'in-progress',
        progress: 75,
        targetDate: '2024-02-16',
        description: '委托专业鉴定机构进行伤残等级鉴定'
      },
      {
        id: 4,
        title: '调解协商',
        type: 'mediation',
        status: 'pending',
        progress: 0,
        targetDate: '2024-03-01',
        description: '与对方当事人及保险公司进行调解协商'
      },
      {
        id: 5,
        title: '诉讼程序',
        type: 'litigation',
        status: 'pending',
        progress: 0,
        targetDate: '2024-03-15',
        description: '调解不成功时启动诉讼程序，向法院提起诉讼'
      },
      {
        id: 6,
        title: '执行程序',
        type: 'execution',
        status: 'pending',
        progress: 0,
        targetDate: '2024-04-01',
        description: '判决生效后执行赔偿，完成案件办理'
      }
    ])
    
    // 待办事项
    const todos = ref([
      {
        id: 1,
        title: '等待伤残鉴定结果',
        description: '华东政法司法鉴定中心鉴定报告预计下周出具',
        priority: 'high',
        assignee: '李卫民律师',
        dueDate: '2024-01-25',
        completed: false
      },
      {
        id: 2,
        title: '准备医疗费清单',
        description: '整理汇总所有医疗费用发票和清单',
        priority: 'medium',
        assignee: '张助理',
        dueDate: '2024-01-22',
        completed: false
      },
      {
        id: 3,
        title: '联系保险公司',
        description: '与对方保险公司确认理赔方案细节',
        priority: 'medium',
        assignee: '李卫民律师',
        dueDate: '2024-01-24',
        completed: false
      },
      {
        id: 4,
        title: '收集误工证明',
        description: '协助当事人开具误工证明和收入证明',
        priority: 'low',
        assignee: '王助理',
        dueDate: '2024-01-26',
        completed: true
      }
    ])
    
    // 新待办事项表单
    const newTodo = reactive({
      title: '',
      description: '',
      priority: 'medium',
      assignee: '',
      dueDate: ''
    })
    
    // 赔偿清单表单
    const compensationForm = reactive({
      age: 35,
      monthlyIncome: '8000',
      disabilityLevel: '',
      hospitalizationDays: 0,
      workLossDays: 0,
      nursingDays: 0
    })
    
    // 赔偿清单项目
    const compensationItems = ref([
      {
        id: 1,
        category: '医疗费',
        description: '事故所产生的医疗费用',
        type: 'medical',
        amount: 0,
        isAutoCalculated: false
      },
      {
        id: 2,
        category: '误工费',
        description: '按照受害人收入状况和误工时间确定',
        type: 'loss',
        amount: 0,
        isAutoCalculated: true
      },
      {
        id: 3,
        category: '护理费',
        description: '护理人员收入状况和护理人数、护理期限确定',
        type: 'loss',
        amount: 0,
        isAutoCalculated: true
      },
      {
        id: 4,
        category: '交通费',
        description: '受害人及必要陪护人员因就医或转院治疗所发生的费用',
        type: 'loss',
        amount: 0,
        isAutoCalculated: false
      },
      {
        id: 5,
        category: '住院伙食补助费',
        description: '按照当地国家机关一般工作人员出差伙食补助标准',
        type: 'loss',
        amount: 0,
        isAutoCalculated: true
      },
      {
        id: 6,
        category: '营养费',
        description: '根据受害人伤残情况参照医疗机构意见确定',
        type: 'loss',
        amount: 0,
        isAutoCalculated: false
      },
      {
        id: 7,
        category: '残疾赔偿金',
        description: '根据受害人丧失劳动能力程度或者伤残等级确定',
        type: 'disability',
        amount: 0,
        isAutoCalculated: true
      },
      {
        id: 8,
        category: '残疾辅助器具费',
        description: '按照普通适用器具的合理费用标准计算',
        type: 'disability',
        amount: 0,
        isAutoCalculated: false
      },
      {
        id: 9,
        category: '精神损害抚慰金',
        description: '因侵权人的行为造成他人严重精神损害的抚慰金',
        type: 'mental',
        amount: 0,
        isAutoCalculated: true
      },
      {
        id: 10,
        category: '被扶养人生活费',
        description: '根据扶养人丧失劳动能力程度确定',
        type: 'family',
        amount: 0,
        isAutoCalculated: false
      }
    ])

    // 鉴定安排表单
    const appraisalForm = reactive({
      institution: '',
      type: '',
      appointmentDate: '',
      estimatedCost: '',
      notes: ''
    })
    
    // 鉴定机构列表
    const appraisalInstitutions = ref([
      { id: 1, name: '华东政法司法鉴定中心' },
      { id: 2, name: '上海市司法鉴定中心' },
      { id: 3, name: '复旦大学司法鉴定中心' }
    ])
    
    // 所需材料清单
    const requiredMaterials = ref([
      { id: 1, name: '身份证复印件', completed: true },
      { id: 2, name: '事故认定书', completed: true },
      { id: 3, name: '医疗诊断证明', completed: true },
      { id: 4, name: '影像学检查报告', completed: false },
      { id: 5, name: '病历资料', completed: false },
      { id: 6, name: '费用清单', completed: false }
    ])
    
    // 鉴定设备上传相关
    const equipmentFiles = ref([])
    const uploadAction = ref('/api/upload/equipment')
    
    // 计算属性
    const pendingTodos = computed(() => {
      return todos.value.filter(todo => !todo.completed)
    })
    
    const completedStages = computed(() => {
      return processStages.value.filter(stage => stage.status === 'completed').length
    })
    
    const estimatedDays = computed(() => {
      const now = dayjs()
      const endDate = dayjs(caseInfo.value.expectedEndDate)
      return Math.max(0, endDate.diff(now, 'day'))
    })
    
    // 赔偿清单相关计算属性
    const compensationTotal = computed(() => {
      return compensationItems.value.reduce((total, item) => {
        return total + (parseFloat(item.amount) || 0)
      }, 0)
    })
    
    // 方法
    const goBack = () => {
      router.go(-1)
    }
    
    const editCase = () => {
      router.push(`/lawyer/case/${caseInfo.value.id}/edit`)
    }
    
    const submitFiling = () => {
      // 跳转到辅助立案页面
      router.push('/lawyer/case-filing-assistance')
      ElMessage.success('正在跳转到辅助立案页面...')
    }
    
    const shareCase = () => {
      ElMessage.success('案件共享功能开发中...')
    }
    
    const archiveCase = async () => {
      try {
        await ElMessageBox.confirm('确定要归档这个案件吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        ElMessage.success('案件归档成功')
      } catch {
        // 用户取消
      }
    }
    
    const getStatusType = (status) => {
      const typeMap = {
        'pending': 'warning',
        'in-progress': 'primary',
        'completed': 'success',
        'archived': 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        'pending': '待处理',
        'in-progress': '进行中',
        'completed': '已完成',
        'archived': '已归档'
      }
      return textMap[status] || '未知'
    }
    
    const getStageClass = (status) => {
      const classMap = {
        'completed': 'completed',
        'in-progress': 'in-progress',
        'pending': 'pending'
      }
      return classMap[status] || 'pending'
    }
    
    const getStageIcon = (type) => {
      const iconMap = {
        'reception': 'fas fa-handshake',
        'evidence': 'fas fa-search',
        'appraisal': 'fas fa-stethoscope',
        'mediation': 'fas fa-balance-scale',
        'litigation': 'fas fa-gavel',
        'execution': 'fas fa-check-circle'
      }
      return iconMap[type] || 'fas fa-circle'
    }
    
    const getStageTagClass = (status) => {
      const classMap = {
        'completed': 'bg-green-100 text-green-700',
        'in-progress': 'bg-blue-100 text-blue-700',
        'pending': 'bg-gray-100 text-gray-700'
      }
      return classMap[status] || 'bg-gray-100 text-gray-700'
    }
    
    const getStageStatusText = (status) => {
      const textMap = {
        'completed': '已完成',
        'in-progress': '进行中',
        'pending': '待开始'
      }
      return textMap[status] || '未知'
    }
    
    const getProgressColor = (progress) => {
      if (progress < 30) return '#f56c6c'
      if (progress < 70) return '#e6a23c'
      return '#67c23a'
    }
    
    const getPriorityClass = (priority) => {
      const classMap = {
        'high': 'bg-red-100 text-red-700',
        'medium': 'bg-yellow-100 text-yellow-700',
        'low': 'bg-green-100 text-green-700'
      }
      return classMap[priority] || 'bg-gray-100 text-gray-700'
    }
    
    const getPriorityText = (priority) => {
      const textMap = {
        'high': '高',
        'medium': '中',
        'low': '低'
      }
      return textMap[priority] || '普通'
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }
    
    const isOverdue = (date) => {
      return dayjs().isAfter(dayjs(date))
    }
    
    // 待办事项管理
    const addTodo = () => {
      todoDialogVisible.value = true
    }
    
    const saveTodo = () => {
      if (!newTodo.title.trim()) {
        ElMessage.warning('请输入待办事项标题')
        return
      }
      
      const todo = {
        id: Date.now(),
        title: newTodo.title,
        description: newTodo.description,
        priority: newTodo.priority,
        assignee: newTodo.assignee,
        dueDate: newTodo.dueDate,
        completed: false
      }
      
      todos.value.unshift(todo)
      
      // 重置表单
      Object.assign(newTodo, {
        title: '',
        description: '',
        priority: 'medium',
        assignee: '',
        dueDate: ''
      })
      
      todoDialogVisible.value = false
      ElMessage.success('待办事项添加成功')
    }
    
    const toggleTodo = (todo) => {
      if (todo.completed) {
        ElMessage.success(`"${todo.title}" 已完成`)
      }
    }
    
    const editTodo = (todo) => {
      ElMessage.info('编辑待办事项功能开发中...')
    }
    
    const deleteTodo = async (todo) => {
      try {
        await ElMessageBox.confirm('确定要删除这个待办事项吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const index = todos.value.findIndex(t => t.id === todo.id)
        if (index > -1) {
          todos.value.splice(index, 1)
          ElMessage.success('待办事项删除成功')
        }
      } catch {
        // 用户取消
      }
    }
    
    // 鉴定安排
    const saveAppraisalPlan = () => {
      ElMessage.success('鉴定方案保存成功')
    }
    
    const submitAppraisal = () => {
      if (!appraisalForm.institution || !appraisalForm.type) {
        ElMessage.warning('请填写必要的鉴定信息')
        return
      }
      ElMessage.success('鉴定申请提交成功')
    }
    
    const submitToFiling = () => {
      router.push('/lawyer/case-filing-assistance')
      ElMessage.success('已提交到立案辅助系统')
    }
    
    // 快速操作
    const addDocument = () => {
      ElMessage.info('添加文档功能开发中...')
    }
    
    const scheduleAppointment = () => {
      ElMessage.info('安排预约功能开发中...')
    }
    
    const contactClient = () => {
      ElMessage.info('联系当事人功能开发中...')
    }
    
    const updateStatus = () => {
      ElMessage.info('更新状态功能开发中...')
    }
    
    // 鉴定设备上传相关方法
    const beforeEquipmentUpload = (file) => {
      const isValidType = /\.(pdf|jpg|jpeg|png|mp4|avi|zip|rar)$/i.test(file.name)
      const isLt100M = file.size / 1024 / 1024 < 100
      
      if (!isValidType) {
        ElMessage.error('仅支持 PDF、图片、视频、压缩包格式!')
        return false
      }
      if (!isLt100M) {
        ElMessage.error('文件大小不能超过 100MB!')
        return false
      }
      return true
    }
    
    const handleEquipmentUploadSuccess = (response, file) => {
      file.url = response.data.url
      file.equipmentCategory = 'other_equipment' // 默认分类
      ElMessage.success('设备文件上传成功')
    }
    
    const handleEquipmentUploadError = (error, file) => {
      ElMessage.error('设备文件上传失败: ' + (error.message || '未知错误'))
    }
    
    const handleEquipmentRemove = (file) => {
      const index = equipmentFiles.value.findIndex(f => f.uid === file.uid)
      if (index > -1) {
        equipmentFiles.value.splice(index, 1)
      }
    }
    
    const getEquipmentFileIcon = (fileName) => {
      const ext = fileName.split('.').pop().toLowerCase()
      const iconMap = {
        pdf: 'fas fa-file-pdf text-red-500',
        jpg: 'fas fa-file-image text-blue-500',
        jpeg: 'fas fa-file-image text-blue-500',
        png: 'fas fa-file-image text-blue-500',
        mp4: 'fas fa-file-video text-purple-500',
        avi: 'fas fa-file-video text-purple-500',
        zip: 'fas fa-file-archive text-orange-500',
        rar: 'fas fa-file-archive text-orange-500'
      }
      return iconMap[ext] || 'fas fa-file text-gray-500'
    }
    
    const formatFileSize = (size) => {
      if (!size) return '0 B'
      const units = ['B', 'KB', 'MB', 'GB']
      let index = 0
      while (size >= 1024 && index < units.length - 1) {
        size /= 1024
        index++
      }
      return `${size.toFixed(1)} ${units[index]}`
    }
    
    const getFileCategory = (fileName) => {
      const ext = fileName.split('.').pop().toLowerCase()
      if (['jpg', 'jpeg', 'png'].includes(ext)) return '图片'
      if (['mp4', 'avi'].includes(ext)) return '视频'
      if (['pdf'].includes(ext)) return '文档'
      if (['zip', 'rar'].includes(ext)) return '压缩包'
      return '其他'
    }
    
    const canPreview = (fileName) => {
      const ext = fileName.split('.').pop().toLowerCase()
      return ['jpg', 'jpeg', 'png', 'pdf'].includes(ext)
    }
    
    const previewEquipmentFile = (file) => {
      if (file.url) {
        window.open(file.url, '_blank')
      } else {
        ElMessage.warning('文件预览地址不可用')
      }
    }
    
    const downloadEquipmentFile = (file) => {
      if (file.url) {
        const link = document.createElement('a')
        link.href = file.url
        link.download = file.name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } else {
        ElMessage.warning('文件下载地址不可用')
      }
    }
    
    const removeEquipmentFile = (index) => {
      equipmentFiles.value.splice(index, 1)
      ElMessage.success('文件已移除')
    }
    
    // 赔偿清单相关方法
    const autoCalculateCompensation = () => {
      // 自动计算各项赔偿金额
      const monthlyIncome = parseFloat(compensationForm.monthlyIncome) || 0
      const dailyIncome = monthlyIncome / 30
      
      compensationItems.value.forEach(item => {
        if (item.isAutoCalculated) {
          switch (item.category) {
            case '误工费':
              item.amount = Math.round(dailyIncome * compensationForm.workLossDays)
              break
            case '护理费':
              // 护理费按100元/天计算
              item.amount = Math.round(100 * compensationForm.nursingDays)
              break
            case '住院伙食补助费':
              // 住院伙食补助费按50元/天计算
              item.amount = Math.round(50 * compensationForm.hospitalizationDays)
              break
            case '残疾赔偿金':
              if (compensationForm.disabilityLevel) {
                // 根据伤残等级计算残疾赔偿金
                const disabilityRatio = getDisabilityRatio(compensationForm.disabilityLevel)
                // 按当地上年度城镇居民人均可支配收入60000元计算，20年
                item.amount = Math.round(60000 * 20 * disabilityRatio)
              }
              break
            case '精神损害抚慰金':
              if (compensationForm.disabilityLevel) {
                // 精神损害抚慰金根据伤残等级确定
                const mentalDamage = getMentalDamageAmount(compensationForm.disabilityLevel)
                item.amount = mentalDamage
              }
              break
          }
        }
      })
      
      ElMessage.success('自动计算完成')
    }
    
    const getDisabilityRatio = (level) => {
      const ratios = {
        '1': 1.0, '2': 0.9, '3': 0.8, '4': 0.7, '5': 0.6,
        '6': 0.5, '7': 0.4, '8': 0.3, '9': 0.2, '10': 0.1
      }
      return ratios[level] || 0
    }
    
    const getMentalDamageAmount = (level) => {
      const amounts = {
        '1': 50000, '2': 45000, '3': 40000, '4': 35000, '5': 30000,
        '6': 25000, '7': 20000, '8': 15000, '9': 10000, '10': 8000
      }
      return amounts[level] || 0
    }
    
    const exportCompensationList = () => {
      // 导出赔偿清单功能
      const csvContent = generateCompensationCSV()
      downloadCSV(csvContent, '赔偿清单.csv')
      ElMessage.success('赔偿清单已导出')
    }
    
    const generateCompensationCSV = () => {
      let csv = '赔偿项目,说明,金额(元)\n'
      compensationItems.value.forEach(item => {
        csv += `"${item.category}","${item.description}","${item.amount}"\n`
      })
      csv += `"合计","","${compensationTotal.value}"\n`
      return csv
    }
    
    const downloadCSV = (content, filename) => {
      const blob = new Blob(['\ufeff' + content], { type: 'text/csv;charset=utf-8;' })
      const link = document.createElement('a')
      const url = URL.createObjectURL(blob)
      link.setAttribute('href', url)
      link.setAttribute('download', filename)
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    
    const toggleCalculationMode = (item) => {
      item.isAutoCalculated = !item.isAutoCalculated
      if (item.isAutoCalculated) {
        // 重新自动计算该项
        autoCalculateCompensation()
      }
    }
    
    const updateTotalAmount = () => {
      // 更新总金额（触发计算属性重新计算）
    }
    
    const formatCurrency = (amount) => {
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
      }).format(amount || 0)
    }
    
    const getTotalByType = (type) => {
      return compensationItems.value
        .filter(item => item.type === type)
        .reduce((total, item) => total + (parseFloat(item.amount) || 0), 0)
    }
    
    const getCategoryIcon = (category) => {
      const iconMap = {
        '医疗费': 'fas fa-hospital text-red-500',
        '误工费': 'fas fa-briefcase text-blue-500',
        '护理费': 'fas fa-hand-holding-heart text-green-500',
        '交通费': 'fas fa-car text-yellow-500',
        '住院伙食补助费': 'fas fa-utensils text-orange-500',
        '营养费': 'fas fa-apple-alt text-green-400',
        '残疾赔偿金': 'fas fa-wheelchair text-purple-500',
        '残疾辅助器具费': 'fas fa-tools text-gray-500',
        '精神损害抚慰金': 'fas fa-heart text-pink-500',
        '被扶养人生活费': 'fas fa-users text-indigo-500'
      }
      return iconMap[category] || 'fas fa-money-bill text-gray-500'
    }
    
    const getCompensationProgress = () => {
      const totalItems = compensationItems.value.length
      const filledItems = compensationItems.value.filter(item => item.amount > 0).length
      return Math.round((filledItems / totalItems) * 100)
    }
    
    const getFilledItemsCount = () => {
      return compensationItems.value.filter(item => item.amount > 0).length
    }
    
    onMounted(() => {
      // 模拟加载案件数据
      console.log('加载案件详情:', route.params.id)
    })
    
    return {
      caseInfo,
      processStages,
      todos,
      newTodo,
      compensationForm,
      compensationItems,
      compensationTotal,
      appraisalForm,
      appraisalInstitutions,
      requiredMaterials,
      todoDialogVisible,
      pendingTodos,
      completedStages,
      estimatedDays,
      goBack,
      editCase,
      submitFiling,
      shareCase,
      archiveCase,
      getStatusType,
      getStatusText,
      getStageClass,
      getStageIcon,
      getStageTagClass,
      getStageStatusText,
      getProgressColor,
      getPriorityClass,
      getPriorityText,
      formatDate,
      isOverdue,
      addTodo,
      saveTodo,
      toggleTodo,
      editTodo,
      deleteTodo,
      autoCalculateCompensation,
      exportCompensationList,
      toggleCalculationMode,
      updateTotalAmount,
      formatCurrency,
      getTotalByType,
      getCategoryIcon,
      getCompensationProgress,
      getFilledItemsCount,
      saveAppraisalPlan,
      submitAppraisal,
      submitToFiling,
      addDocument,
      scheduleAppointment,
      contactClient,
      updateStatus,
      equipmentFiles,
      uploadAction,
      beforeEquipmentUpload,
      handleEquipmentUploadSuccess,
      handleEquipmentUploadError,
      handleEquipmentRemove,
      getEquipmentFileIcon,
      formatFileSize,
      getFileCategory,
      canPreview,
      previewEquipmentFile,
      downloadEquipmentFile,
      removeEquipmentFile
    }
  }
}
</script>

<style scoped>
.case-detail {
  min-height: 100vh;
  background-color: #f9fafb;
}

/* 时间轴样式 */
.process-timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  margin-bottom: 24px;
  position: relative;
}

.timeline-node {
  position: relative;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.node-circle.completed {
  background-color: #10b981;
}

.node-circle.in-progress {
  background-color: #3b82f6;
}

.node-circle.pending {
  background-color: #9ca3af;
}

.connecting-line {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background-color: #e5e7eb;
  z-index: 1;
}

.timeline-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  min-height: 80px;
}

.timeline-item:last-child .connecting-line {
  display: none;
}

/* 待办事项样式 */
.todo-item {
  transition: all 0.2s ease;
}

.todo-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 信息面板样式 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-weight: 500;
  color: #6b7280;
  font-size: 14px;
}

.info-item .value {
  color: #1f2937;
  font-size: 14px;
}

/* 材料清单样式 */
.material-checklist {
  max-height: 200px;
  overflow-y: auto;
}

.material-item {
  transition: background-color 0.2s ease;
}

.material-item:hover {
  background-color: #f9fafb;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .timeline-item {
    flex-direction: column;
  }
  
  .timeline-node {
    margin-right: 0;
    margin-bottom: 12px;
    align-items: flex-start;
    flex-direction: row;
  }
  
  .connecting-line {
    display: none;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 16px;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
  
  .timeline-content {
    padding: 12px;
  }
  
  .node-circle {
    width: 32px;
    height: 32px;
  }
}

/* 设备上传样式 */
.equipment-upload-section {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  background-color: #f9fafb;
}

.upload-header {
  margin-bottom: 16px;
}

.equipment-uploader {
  width: 100%;
}

.upload-content {
  padding: 40px;
  text-align: center;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.upload-content:hover {
  border-color: #3b82f6;
  background-color: #f0f9ff;
}

.upload-icon {
  font-size: 48px;
  color: #9ca3af;
  margin-bottom: 16px;
}

.upload-text p {
  margin: 8px 0;
  font-size: 14px;
  color: #6b7280;
}

.upload-text em {
  color: #3b82f6;
  font-style: normal;
}

.upload-hint {
  font-size: 12px !important;
  color: #9ca3af !important;
}

/* 文件列表样式 */
.uploaded-files h4 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.files-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.file-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.file-icon {
  margin-right: 12px;
  font-size: 16px;
}

.file-details {
  flex: 1;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 2px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

.file-size {
  font-weight: 500;
}

.file-category {
  color: #9ca3af;
}

.file-actions {
  display: flex;
  gap: 4px;
}

/* 设备类别标记样式 */
.equipment-categories h4 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.categories-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.file-label {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 250px;
  overflow: hidden;
}

.file-label span {
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-select {
  width: 150px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .file-actions {
    align-self: flex-end;
  }
  
  .category-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .category-select {
    width: 100%;
  }
  
  .file-label {
    max-width: 100%;
  }
}

/* 赔偿清单样式 */
.compensation-form .section-title {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.compensation-form .section-title h3 {
  margin: 0;
  font-weight: 600;
  color: #374151;
}

.compensation-table {
  margin-top: 16px;
}

.compensation-list-table {
  border-radius: 8px;
  overflow: hidden;
}

.compensation-category {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.compensation-summary {
  border: 1px solid #e3f2fd;
}

.compensation-summary .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.compensation-summary .summary-item.total {
  border-top: 1px solid #90caf9;
  padding-top: 12px;
  margin-top: 8px;
}

.compensation-summary .label {
  font-size: 14px;
  color: #546e7a;
  font-weight: 500;
}

.compensation-summary .value {
  font-size: 16px;
  font-weight: 600;
  color: #1565c0;
}

.compensation-summary .total .value {
  font-size: 18px;
  color: #d32f2f;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .compensation-summary .grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .compensation-summary .summary-item {
    padding: 6px 0;
  }
  
  .compensation-form .grid {
    grid-template-columns: 1fr;
  }
}
</style> 